<template>
	<!-- 小分类 -->
  <div class="classify-view">
    <!-- 调用vant组件 -->
    <van-sidebar v-model="active" @click="a">
      <van-sidebar-item style="text-align: center;" v-for="item in baseStore.classifyAllList" 
	  :title="item.title.slice(0,2)"  
	  :key="item.cat_id" 
	  :name="item.title"/>
    </van-sidebar>
	<!-- 右侧小分类 -->
    <div class="classify-right">
			<img :src="baseStore.classifyAllList[active]?.title_img"/>
			<h1>• {{ baseStore.classifyAllList[active]?.title }} •</h1>
			<ul>
				<!--渲染数据 点击跳转 -->
				<li v-for="item in baseStore.classifyAllList[active]?.data" :key="item._id" 
				@click="router.push(
					{
						path:'/classifysmall',
						query:{ 
							catId:baseStore.classifyAllList[active].cat_id,
							smallName: item.product_content,
							catName: baseStore.classifyAllList[active]?.title.slice(0,2)
						}
					})">
					<img :src="item.product_img"/>
					<p>{{ item.product_content }}</p>
				</li>
			</ul>
		</div>

  </div>

</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { userBaseStore } from '../../store';
  import { useRouter } from 'vue-router';
  

  //下标索引值
  let active = ref('0')
  let baseStore = userBaseStore();
  //调用方法获取数据
  baseStore.getClassifyAllData();


  let router = useRouter();

  let a = ()=>{
	console.log(active.value);
	
  }
  

</script>
<style  lang="less">
  //展示块
  .classify-view{
    display: flex;
    justify-content: space-between;
  }
  //右侧小分类数据
  .classify-right{
		padding: 10px;
		box-sizing: border-box;
		width: 85%;
		&>img{
			width:100%;
		}
		h1{
			text-align: center;
			line-height: 50px;
			font-size: 18px;
			font-weight: normal;
			color: #666;
		}
		
		ul{
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
     
			li{
        // padding: 5px;
        margin-right: 8px;
				width: 30%;
				margin-bottom: 30px;
				img{width: 100%;}
				p{text-align: center; font-size: 14px; color: #333;}
			}
		}
	}
  //设置宽度
  :root{
    --van-sidebar-width: 150px;
  }
  //去掉滚动条
  .van-sidebar{
    
    &::-webkit-scrollbar{
      width: 0px;
    }
  }
</style>
